import React from 'react'
import { Route } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import Index from '../index'
import Houselist from '../houselist'
import News from '../news'
import Profile from '../profile'
import './index.css'

export default class Home extends React.Component {
  state = {
    selectedTab: this.props.history.location.pathname
  }

  list = [{
    title: '首页',
    icon: 'icon-ind',
    path: '/home'
  }, {
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/houselist'
  }, {
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news'
  }, {
    title: '我的',
    icon: 'icon-my',
    path: '/home/profile'
  }]

  componentDidUpdate(prevProps) {
    if (prevProps.history.location.pathname !== this.state.selectedTab) {
      this.setState({
        selectedTab: prevProps.history.location.pathname
      })
    }
  }

  renderTabBar() {
    return (
      <TabBar
        tintColor="#21b97a"
        noRenderContent={true}
        className="tabbar"
      >
        {this.list.map(item => (
          <TabBar.Item
            title={item.title}
            key={item.icon}
            icon={<i className={`iconfont ${item.icon}`}></i>}
            selectedIcon={<i className={`iconfont ${item.icon}`}></i>}
            selected={this.state.selectedTab === item.path}
            onPress={() => {
              this.setState({
                selectedTab: item.path
              })
              this.props.history.push(item.path)
            }}
            data-seed="logId"
          >
            life
          </TabBar.Item>
        ))}
      </TabBar>
    )
  }

  render() {
    return (
      <div id="home">
        <Route exact path="/home" component={Index}></Route>
        <Route path="/home/houselist" component={Houselist}></Route>
        <Route path="/home/news" component={News}></Route>
        <Route path="/home/profile" component={Profile}></Route>

        { this.renderTabBar()}
      </div>
    )
  }
}
